<template>
	<up-dropdown-item :title="dropItemTitle">
		<view class="dropdown-content">
			<view
				v-for="item in data"
				:key="item.id"
				class="dropdown-item"
				:class="{ selected: selectedId === item.id }"
				@click="selectItem(item.id)"
			>
				{{ item.name }}
				<image v-if="selectedId === item.id" :src="imgBaseUrl + 'icon-check.png'" class="icon-40" />
				<image v-else :src="imgBaseUrl + 'icon-uncheck.png'" class="icon-40" />
			</view>
		</view>
	</up-dropdown-item>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: String,
	title: String,
	data: {
		type: Array as PropType<any[]>,
		default: [],
	},
})
const emit = defineEmits(["update:modelValue", "updateValue", "close"])
const selectedId = computed({
	get() {
		return props.modelValue
	},
	set(newValue) {
		let value = props.data.find((item) => item.id == newValue).value
		emit("update:modelValue", newValue)
		emit("updateValue", [value])
	},
})
const imgBaseUrl = inject("imgBaseUrl")
const selectItem = (id: string) => {
	selectedId.value = id
	emit("close")
}
const dropItemTitle = computed(() => {
	let selectItemName = ""
	let findName = props.data.find((item: any) => item.id == selectedId.value)?.name
	if (findName) {
		selectItemName = findName
	}
	return selectItemName
})
</script>
<style lang="scss" scoped></style>
